<template>
  <div class="songDetail">
    <div class="shoutu">
      <van-icon name="revoke" size="2em" @click="onClickLeft" />
      <img :src="tpList.coverImgUrl" />
    </div>
    <div class="list">
      <ul>
        <li
          v-for="(item, index) in tuList"
          :key="(item, index).id"
          @click="toPlay(item.id)"
        >
          <b>{{ index + 1 }}</b>
          <div class="li-wrap">
            <p>{{ item.name }}</p>
            <i>{{ item.ar[0].name }}</i>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tuList: [],
      tpList: [],
      imgList: [],
    };
  },
  created() {
    axios
      .get(
        "http://localhost:3000/top/list?id=" +
          localStorage.getItem("songDetail")
      )
      .then((res) => {
        this.tuList = res.data.playlist.tracks;
        // console.log(res.data.playlist);
        this.tpList = res.data.playlist;
        // console.log(res.data.playlist.creator.backgroundUrl);
        // console.log(res.data.playlist.tracks);
        // console.log(res.data.playlist.tracks[0].ar[0].name);
        // console.log( localStorage.getItem("songDetail"));
      });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    toPlay(id) {
      localStorage.setItem("singleId", id);
      this.$router.push({
        name: "Play",
      });
    },
  },
};
</script>

<style scoped>
.shoutu {
  width: 100vw;
  height: 40vh;
  position: relative;
}
.shoutu img {
  width: 100vw;
  height: 40vh;
}
.list {
  width: 100vw;
  height: 60vh;
}
.list span {
  display: block;
  width: 100vw;
  height: 7vh;
  border-bottom: teal 1px solid;
  line-height: 7vh;
}

.list ul li {
  width: 90vw;
  height: 9vh;
  margin: 5px auto;
  box-shadow: 0 1px 2px #ccc;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 1s;
}
.list ul li:hover {
  cursor: pointer;
  background: #ccc;
  color: #fff;
}
.list ul li b {
  flex: 1;

  text-align: center;
}
.list ul li .li-wrap {
  width: 75vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
.list ul li p {
  font-size: 16px;
  line-height: 25px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list ul li i {
  font-size: 12px;
  font-style: normal;
  color: #aaa;
}
.songDetail .van-icon-revoke {
  position: absolute;
  top: 5px;
  left: 5px;
  color: #fff;
}
</style>
